<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的浮动</title>
    <link rel="stylesheet" href="../css/11.1.css">
</head>
<body>
<article><!--  -->
    <aside><!-- 元素的转换 -->
        <p class="p2" style="border: 1px solid red;width: 600px;height: 20px">行内元素转换为块元素</p>
        <p class="p2" style="border: 1px solid red;width: 600px;height: 20px">行内元素转换为块元素</p>
        <p class="p2" style="border: 1px solid red;width: 600px;height: 20px">行内元素转换为块元素</p>
        <div class="p1" style="border: 1px solid red">块元素转换为行内元素</div>
        <div class="p1" style="border: 1px solid red">块元素转换为行内元素</div>
        <div class="p1" style="border: 1px solid red">块元素转换为行内元素</div>
    </aside>
    <aside><!-- overflow属性，对超出盒子的内容做选择 -->
        <div class="div1">
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
            <p>这是一段演示用文字！</p>
        </div>
    </aside>
    <aside><!-- 元素的浮动 -->
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <!-- 以上的三个div元素都是设置的左浮动,同时设置右浮动就会从右边开始排列 -->
        <div class="div5"></div><!-- 这个元素没有设置浮动，非浮动元素会忽略掉前面的浮动元素。并取代前面的浮动元素的位置，所以绿色的块会在最前面并在第一个浮动元素的下方显示 -->

        <div class="div5"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <!-- 由于第一个绿色的块没有设置浮动，所以不能移动位置，红色的块因为上一个元素没有设置浮动所以不能和上一个元素同行显示，第三个元素由于第二个元素设置了浮动所以可以和第二个元素同行显示 -->
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <p>这是一段演示用文字！</p>
    </aside>
</article>
</body>
</html>